<template>
    <div>
        <h2>显示权益列表</h2>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="flag" @change="all"></th>
                    <th>权益名称</th>
                    <th>会员等级</th>
                    <th>权益图片</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td><input type="checkbox" v-model="arrids" :value="item.memberRightsId" @change="fan"></td>
                    <td>{{ item.memberRightsName }}</td>
                    <td>{{ item.memberLevelId }}</td>
                    <td><img :src="'https://localhost:7088'+item.memberRightsPhoto" alt="" width="70" height="70"></td>
                    <td>{{ item.state==1?"禁用":"启用" }}</td>
                    <td><input type="button" value="修改" @click="upt(item.memberRightsId)"></td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="分配权益" @click="sendrights">
    </div>
</template>

<script setup lang="ts">
import axios  from 'axios';
import { reactive,toRefs,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
const router = useRouter();
const route = useRoute();

const data:any = reactive({
    state:{},
    list:[],
    flag:false,
    arrids:[]
    
})
const {state,list,flag,arrids} = toRefs(data);

onMounted(()=>{
    getlist();
})
//显示
const getlist = ()=>{
    axios({
        url:'/api/Member/GetNumber',
        method:'get',
        params:state.value
    })
    .then(res=>{
        console.log(res);
        list.value=res.data.data;
        
    })
    .catch(err=>{
        console.log(err);
    })
    
}
//修改
const upt = (memberRightsId:any)=>{
    router.push({
        path:'/UptRights',
        query:{
            memberRightsId:memberRightsId
        }
    })
}


//全选
const all = (e:any)=>{
    console.log(e);
    flag.value !=flag.value;
    if(flag.value==true)
    {
        list.value.forEach((item:any)=>{
            arrids.value.push(item.memberRightsId);
        })
    }
    else{
        arrids.value=[];
    }
    
}
// if(e.target.checked==false)
    // {
    //     arrids.value.splice(arrids.value.indexOf(e.target.value),1);
    // }
    // else{
    //     arrids.value.push(e.target.value);
    // }
//反选
const fan = (e:any)=>{
    console.log(e);
    
    if(arrids.value.length==list.value.length)
    {
        flag.value=true;
    }
    else{
        flag.value=false;
    }
}

//分配权益
//小添加
const sendrights=()=>{
    axios({
        url:'/api/Member/AddOrder',
        method:'post',
        data:state.value
    })
    .then(res=>{
        console.log(res);
        if(res.data.data>0)
        {
            alert('分配权益成功');
            return;
        }
        else{
            alert('分配权益失败');
            return;
        }
            
    })
    .catch(err=>{
        console.log(err);
    })
}


</script>

<style scoped>

</style>